vue-cli3路由vue-router用法
安装npm install vue-router导入vue-router// main.js文件内// 导入vue-routerimport Vue from 'vue' // vue-router是以来vue的import VueRouter from 'vue-router' // 导入vue-router，注意import VueRouter 不能写成 import Vue-Router，因为不支持带-的写法。// 必须要通过 Vue.use() 明确地安装路由功能Vue.use(VueRoute...
2024-01-10
解决vue-router路由拦截造成死循环问题
笔记：vue-router路由拦截造成死循环,在做路由拦截的时候，一直出现死循环.router的index.js文件路由配置const router = new Router({routes: [{path: '/login',name: 'login',component: Login,meta: {isShow: true}}, {path: '/',component: Layout,redirect: '/home',meta: {title: "首页菜单"}, children: [{...
2024-01-10
对 Vue-Router 进行单元测试的方法
由于路由通常会把多个组件牵扯到一起操作，所以一般对其的测试都在 端到端/集成 阶段进行，处于测试金字塔的上层。不过，做一些路由的单元测试还是大有益处的。对于与路由交互的组件，有两种测试方式：使用一个真正的 router 实例mock 掉 $route 和 $router 全局对象因为大多数 Vue 应用用的都...
2024-01-10
vue-router怎么动态配置，比如根据用户权限不同显示路由
1、vue-router怎么动态配置，比如根据用户权限不同显示路由如上图，我想根据用户权限不同，动态添加删除菜单下面是路由配置const routes = [ { path: '/', component: Home, name: '系统管理', iconCls: 'el-icon-setting', children: [ { path: '/Page12', component: Page12, name: '组织机构' }, { path: '/...
2024-01-10
vue-router路由导航守卫中next控制实现
使用 vue-router 的导航守卫钩子函数，某些钩子函数可以让开发者根据业务逻辑，控制是否进行下一步，或者进入到指定的路由。例如，后台管理页面，会在进入路由前，进行必要登录、权限判断，来决定去往哪个路由，以下是伪代码：// 全局导航守卫router.beforEach((to, from, next) => {if('no login'){next(...
2024-01-10
请问使用vue-router与v-show分别实现选项卡有什么区别？
我们开发项目，无论是后台管理系统，还是移动应用，经常会使用到各式各样类似选项卡的切换组件，如下：1、管理后台：2、选项卡：3、移动端底部tabber:问题如下：1、实现这种类选项卡组件有2中方法：分别是 vue-router的嵌套路由 和 v-show, 请问2种实现有什么区别（个人看不出区别），来回切换时，能否缓存原本查看的内容呢？什么时候使用vue-router的嵌套路由，什么时候使用v-sh...
2024-03-14
vue生命周期及router按需加载
Vue生命周期=> 初始化实例=> beforeCreated(此步不能调用数据及方法)=> 实例创建完成(observer数据观测 属性和方法的运算 watch/event事件回调)=> created=> 检测页面内的el template并编译渲染=> beforeMount=> vm.$el替换el,挂载实例=> mounted()=> 检测数据是否发生改变 发生改变时 => beforeUpdated ...
2024-01-10
vue 的http请求方法---自带的vue-resource
先用命令安装库cnpm install vue-resource --save-dev main.jshome.vuepost方法如果方法不放到 methods里面，那么访问页面就会执行函数获取响应的data.body里面数组不同位置的数据.then(function(data){ console.log(data) this.blogs=data.body.slice(0,1) console.log(this.blogs)https://www.cnblogs.com/ka...
2024-01-10
Vue-router插件使用
Vue是单页面开发，即页面不刷新。 页面不刷新，而又要根据用户选择完成内容的更新该怎么做？Vue中采用锚点来完成。 如访问http://127.0.0.1#/index就是主页，而访问http://127.0.0.1#/home就是家目录。 手动分析url组成与处理视图的切换非常麻烦，所以Vue提供插件Vue-router，它能够根据用户...
2024-01-10
vue-计算属性-computed
/* 计算属性:vue中对数据进行一些组合与计算的话，可以使用computed(计算属性); //例如：获取当前日期，组合*/ // 组合变成10-1 var vm = new Vue({ el: '#app', data :{ }, computed:{ //默认写法是这样 time : { return new Date()...
2024-01-10
vue 项目引入echarts 添加点击事件操作
main.js中import echarts from 'echarts'Vue.prototype.$echarts = echartsvue文件中_this.calendarChart=_this.$echarts.init(document.getElementById('earlyWarningCalendar'))_this.calendarChart.on('click',function (param) { console.log(param)}) _this.calendarChart...
2024-01-10
where和having区别：
where和having区别：having只能用在group by之后，对分组后的结果进行筛选(即使用having的前提条件是分组)。where肯定在group by 之前，即也在having之前。where后的条件表达式里不允许使用聚合函数，而having可以。Where是一个约束声明，在查询数据库的结果返回之前对数据库中的查询条件进行约束，即在结果...
2024-01-10
使用Vue、React和Koa开发个人博客
前言实习了大半年，又临近毕业，一直想做一个属于自己的博客。于是就用Vue、React和Koa开发了一个服务端渲染的博客系统。其中： - 后端管理使用Vue开发 - 前端页面使用React服务端渲染框架nextjs - 接口服务使用Koa2 + mongodb + mongoose（使用nodemailer当接口发生500时向我发送邮件通知）项目地址是点我访...
2024-01-10
react16与react15之间的区别
项目中我一般用的还是react15的比较多，偶尔接触react16，目前使用的大多是生命周期的区别，16新增了几个生命周期。static getDerivedStateFromProps：用于代替componentReceiveProps。是个静态方法。父组件传入子组件的属性更新时，同步更新子组件state。B的a属性值是state，会变化新值和旧值不同时，返回新值更...
2024-01-10详解从react转职到vue开发的项目准备
前言首先，为什么我需要做这个项目准备工作呢？因为常年习惯React开发的我，最近突然接手了一个Vue项目，而之前基本没有过Vue的实践，这么突兀让还在沉溺于React开发的我进行Vue开发，甚是不习惯，那自然我需要想办法让Vue开发尽量与React相似，这样大概让自己在开发过程中更得心应手吧。组件开...
2024-01-10
Vue页面切换和a链接的本质区别详解
Vue-router是伴随着Vue框架出现的路由系统，它也是公认的一种优秀的路由解决方案。在使用Vue-router时候，我们常常会使用其自带的路径跳转组件Link,通过<Link to="path"></Link>实现跳转，这和传统的<a href="path" rel="external nofollow" ></a>何其相似！但它们到底有什么具体的区别呢？对比<a>，Link组件避免了不必要...
2024-01-10Vue之Watcher源码解析（1）
上一节最后再次调用了mount函数，我发现竟然跳到了7000多行的那个函数，之前我还说因为声明早了被覆盖，看来我错了！就是这个函数：// Line-7531 Vue$3.prototype.$mount = function(el, hydrating) { el = el && inBrowser ? query(el) : undefined; return mountComponent(this, el, hydrating) };第一步query就不用看了，el此时是一...
2024-01-10vue reactive 中的数据为什么不能等于另外一个？
const data = reactive({ name: {id: 1, title: 'AAAAA'}, new1: data.name, new2: JSON.parse(JSON.stringify(data.name))})data.name 和 JSON.parse(JSON.stringify(data.name)) 都不可以，为什么？只能在 reactiv...
2024-02-07
react/vue 组件设计方法/原则
网上看到了好多篇 react/vue 组件设计方法/原则 ，内容都是雷同（指不该相同而相同）。 我深恶痛绝，并深刻检讨自己，意识到普及互联网知识已经迫在眉睫，绝不容许有人浑水摸鱼。在短暂的失落和悲怆过后，这肩负振兴祖国互联网知识的重任，舍我其谁？ 我集百家之长于一身，取其精华去...
2024-01-10
【转】vue中动态设置meta标签和title标签
因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮，所有就需要手动设置meta标签，标题和内容//router内的设置{ path: '/teachers', name: 'TDetail', component: TDetail, meta: { title:"教师详情", content: 'disable' } }, { path: '/article', name...
2024-01-10
Vue-Devtools插件使用
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧安装: 1.到github下载：git clone https://github.com/vuejs/vue-devtools2.在vue-devtools目录下安装依赖包12cd vue-devtoolscnpm install3.修改manifest.json文件把"persistent":false改成true 4.编译...
2024-01-10
vue中v-show和v-if的异同
一、官方解释：v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么...
2024-01-10
vue中ts写的代码必须加分号吗？
第一次在vue中用ts，发现会保存后会自动加上分号，不加分号会报错vscode配置时不加分号的，请问下这种情况该怎么处理Step1:Install eslint-config-prettier:npm install --save-dev eslint-config-prettier prettierStep2:add eslint-config-prettier to the "extends" array in your .eslintrc.* file. Make sure to put it la...
2024-01-10
vue-devtools使用问题？
Chorm浏览器打开控制器vue项目就报关闭就不会有这个错，大佬们 这怎么弄回答：这有个文章和你的问题一样：https://blog.csdn.net/egg_er/article/details/124679458这个如果不行试试：在谷歌游览器中移除devtools插件，再重新添加一下。目前我用的 "vue": "^2.7.10" 插件4.14 没有报错回答：试一下使用低版本的vue dev...
2024-03-01
vue之slot用法
slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。有 name 特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。一、单个组件如果子组件的模板不包含 slot，那么父组件的内...
2024-01-10
Vue中的slot，作用域插槽和具名插槽
1、具名插槽有时候我们希望在指定的位置输出我们的子元素，这时候具名插槽就排上了用场。//组件调用时<MyFooter v-red :age.sync="age"> <template v-slot:footer> //这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。 <div>list</div> </template></MyFooter>//书写组件时<template> ...
2024-01-10
Vue.js常用指令：v-model
v-model 用来获取表单元素的值。对应input输入框获取的是输入的值，单选按钮、复选框、下拉框获取的是选择的状态。使用v-model可以在表单控件或者组件上创建双向绑定。代码示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
2024-01-10
深入理解vue中的slot与slot-scope
写在前面vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”，于是就关闭了vue说明文档。实际上，插槽的概念很简单，下面...
2024-01-10
vue中的slot（插槽）
原文地址：https://www.cnblogs.com/loveyt/p/9946450.htm什么是插槽？插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组...
2024-01-10
vue-简单的todolist
<template><div class="root"><!-- <div class="bg" style="font-size:0"><img v-bind:src="imgArr[cur_img_index]"><img v-bind:src="imgArr[cur_img_index]"> ...
2024-01-10
